<template>
  <div style="height: 800px; padding-top: 37px; padding-bottom: 17px">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 20px">发送消息</span>
      </div>
      <div
        style="
          height: 215px;
          overflow: auto;
          overflow-x: hidden;
          font-size: 20px;
        "
      >
        <ul>
          <li v-for="(value, key, index) in sendInParams" :key="index">
            {{ key }} ：{{ value }}
          </li>
        </ul>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 20px">返回消息</span>
      </div>
      <div
        style="
          height: 215px;
          overflow: auto;
          overflow-x: hidden;
          font-size: 20px;
        "
      >
        <ul>
          <li v-for="(value, key, index) in results_new" :key="index">
            {{ key }} ：<span style="white-space: pre-wrap">{{ value }}</span>
          </li>
        </ul>
      </div>
    </el-card>
    <el-card class="box-card-conclusion">
      <div slot="header" class="clearfix">
        <span style="font-size: 20px">测试结果</span>
      </div>
      <div :class="[sendOutParams.code == 200 ? 'success' : 'failure']">
        <div
          v-for="(value, key, index) in results"
          :key="index"
          style="padding-left: 40px; padding-top: 10px"
        >
          <span style="white-space: pre-wrap">{{ value }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {};
  },

  computed: {
    ...mapState(["sendInParams", "sendOutParams", "httpsPageFlag"]),
    results() {
      var final_results = {};
      if (Object.keys(this.sendOutParams).length != 0) {
        final_results.analyses = this.sendOutParams.analyses.split(
          "****************************** 结果如下 ******************************\n"
        )[
          this.sendOutParams.analyses.split(
            "****************************** 结果如下 ******************************\n"
          ).length - 1
        ];
        final_results.code = this.sendOutParams.code;
        final_results.msg = this.sendOutParams.msg;
        if (final_results.code === 500 && this.httpsPageFlag) {
          this.$message.error("请求超时!请检查厂商ip是否设置正确!");
          this.$store.commit("CHANGEFIRSTHTTPSPAGEFLAG", { val: 0 });
        }
      }
      return final_results;
    },
    results_new() {
      var final_results = {};
      if (Object.keys(this.sendOutParams).length != 0) {
        final_results.analyses = this.sendOutParams.analyses.split(
          "************************************************************************************************************************\n"
        )[
          this.sendOutParams.analyses.split(
            "************************************************************************************************************************\n"
          ).length - 1
        ];
        final_results.code = this.sendOutParams.code;
        final_results.msg = this.sendOutParams.msg;
      }
      return final_results;
    },
  },
};
</script>

<style lang="less">
.text {
  font-size: 14px;
}

.text-wrapper {
  white-space: pre-wrap;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 83%;
  margin-left: 9%;
  margin-bottom: 2%;
  /* height: auto !important; */
  height: 280px !important;
  min-height: 280px !important;
}
.box-card-conclusion {
  width: 83%;
  margin-left: 9%;
  margin-bottom: 2%;
  /* height: auto !important; */
  height: 200px !important;
  min-height: 200px !important;
}
div {
  &.success {
    height: 135px;
    overflow: auto;
    overflow-x: hidden;
    font-size: 23px;
    color: green;
    // padding-top: -10px !important;
  }
  &.failure {
    height: 135px;
    overflow: auto;
    overflow-x: hidden;
    font-size: 23px;
    color: red;
    // padding-top: -10px !important;
  }
}
</style>
